<template>
  <div style="padding: 6px;">
    <div class="clearfix">
      <div style="float: right" >
        <el-button type="primary" size="small" icon="el-icon-plus" @click="addXiangMu">添加项目</el-button>
        <el-button type="primary" size="small" icon="el-icon-refresh" @click="loadXiangMu">刷新</el-button>
      </div>
      <div style="clear: both"></div>
    </div>

    <el-row :gutter="16">
      <el-col :span="6" v-for="(item,index) in xmObj.list" :key="item.id">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span style="font-size: 18px;font-weight: bold">{{item.xmname}}</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="xiangmukanban(item.id)">项目看板</el-button>
          </div>
          <div class="divnr">创建人：<span>{{item.userName}}</span></div>
          <div class="divnr">
            创建时间：<span><DateFormat :value="item.createTime" :format="'YYYY-MM-DD HH:mm'"></DateFormat></span>
          </div>
          <div class="divdesc">项目描述：<span>{{item.xmdesc}}</span></div>
          <div class="cardfooter">
            <el-button size="mini" type="primary" @click="gysAdmin(item.id)">供应商管理</el-button>
            <el-button size="mini" type="primary" @click="editXiangMu(item.id)">修改</el-button>
            <el-popconfirm style="margin-left: 8px;" confirmButtonText='确认' cancelButtonText='取消'
                           icon="el-icon-info" iconColor="red"
                           title="确认要删除吗？" @confirm="deleteXiangMu(item.id)">
              <el-button slot="reference"  size="mini" type="danger">删除</el-button>
            </el-popconfirm>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-pagination class="center" background layout="total, prev, pager, next"
                   @current-change="loadXiangMu" :total="xmObj.total"
                   :current-page.sync="sd.pageNum" :page-size="sd.pageSize">
    </el-pagination>

    <el-drawer :title="popupTitle" :visible.sync="entityDetailVisible" direction="rtl" :wrapperClosable="false" size="35%">
      <xiangmuDetail v-if="entityDetailVisible" :visible.sync="entityDetailVisible" :entityId="popupEntityId"></xiangmuDetail>
    </el-drawer>
    <el-dialog :title="popupTitle" :visible.sync="gysAdminVisible" :close-on-click-modal="false" width="1360px">
      <Gysadmin v-if="gysAdminVisible" :visible.sync="gysAdminVisible" :xmId="popupEntityId"></Gysadmin>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request'
import xiangmuDetail from "@/views/xiangmu/xiangmuDetail";
import Gysadmin from "@/views/xiangmu/gysadmin";
export default {
  components: { xiangmuDetail, Gysadmin},
  data() {
    return {
      sd: {
        pageNum: 1,
        pageSize: 12
      },
      xmObj: {},
      entityDetailVisible : false,
      gysAdminVisible : false,
      popupTitle : '',
      popupEntityId : 0,
    }
  },
  mounted() {
    this.loadXiangMu()
    this.$EventBus.$on("xiangmuadd", () => {
      this.sd.pageNum = 1;
      this.loadXiangMu();
    });
    this.$EventBus.$on("xiangmuedit", () => {
      this.loadXiangMu();
    });
  },
  beforeDestroy() {
    this.$EventBus.$off("xiangmuadd")
    this.$EventBus.$off("xiangmuedit")
  },
  methods: {
    loadXiangMu() {
      request({
        url: '/xiangmu/pagexiangmu',
        data: this.sd
      }).then(res => {
        const { data } = res
        this.xmObj = data
      })
    },
    gysAdmin(id){
      this.popupEntityId= id;
      this.popupTitle= "供应商管理"
      this.gysAdminVisible= true
    },
    addXiangMu(){
      this.popupEntityId = 0;
      this.popupTitle= "新增项目"
      this.entityDetailVisible= true
    },
    editXiangMu(id){
      this.popupEntityId= id;
      this.popupTitle= "修改项目"
      this.entityDetailVisible= true
    },
    deleteXiangMu(id){
      request({
        url: '/xiangmu/deletexiangmu',
        data: {id : id}
      }).then(res => {
        if(res.code === '200') {
          this.$message.success(res.msg)
          this.loadXiangMu();
        }
      })
    },
    xiangmukanban(id){
      this.$router.push({path: '/xiangmuview/kanban', query: {xmId: id}})
    }
  }
}
</script>

<style lang="scss" scoped>
  div.divnr{
    text-indent: 16px;
    font-size: 14px;
    color: #666666;
    height: 30px;
    line-height: 30px;
  }
  div.divdesc{
    text-indent: 16px;
    font-size: 14px;
    color: #666666;
    height: 100px;
    line-height: 30px;
    overflow: auto;
  }
  div.cardfooter{
    text-align: right;
    padding-bottom: 5px;
    padding-right: 5px;
  }
</style>
